<template>
  <div class="container-articles">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb> -->
        <my-bread>内容管理</my-bread>
      </div>
      <!-- 表单区域 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="状态：">
          <el-radio-group v-model="form.status">
            <!-- :label="0" value写在标签外 -->
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 频道组件 -->
        <channel v-model="form.channelId"></channel>
        <el-form-item label="日期：">
            <el-date-picker
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              placeholder="选择日期"
              v-model="form.date"
              value-format="yyyy-MM-dd"
              >
            </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="this.isLoading" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
  </el-card>
  <el-card style="margin-top:20px">
    <div slot="header">根据筛选条件查到{{total_count}}条数据:</div>
    <!-- 表格
      el-table
        data属性： 提供表格的数据来源
      el-table-colomn
        - prop : 要与data中article列表对象的每个 属性名(key) 对应
        - label: 当前列的 表头标题
     -->
    <el-table
      :data="articles"
      style="width: 100%"
      v-loading="Loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)">
      <!-- 封面 -->
      <el-table-column prop="cover" label="封面" width="180">
        <!--
          自定义 模板列
            1. 不需要设置prop
            2. slot-cope="scope"  用来指定在template中可通过scope来获取当前行的信息
               scope.row: 表示当前行的数据
               scope.row.cover.images[0]: 表示这一行封面的地址
        -->
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <!-- <span style="margin-left: 10px">{{ scope.row.cover.images[0] }}</span> -->
          <!-- el-image
            lazy: 开启懒加载功能，当图片滚动到可视范围内才会加载。
                  可通过scroll-container来设置滚动容器，
                  若未定义，则为最近一个overflow值为auto或scroll的父元素
            :src: url地址
            :fit: 图片显示样式
          -->
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.cover.images[0]"
            lazy>
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <!-- 标题 -->
      <el-table-column
        prop="title"
        label="标题"
        width="180">
      </el-table-column>
      <!-- 状态 -->
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span style="margin-left: 10px">
            <!-- 0-草稿 1-待审核 2-审核通过 3-审核失败 4-删除 -->
            <!-- {{ scope.row.status }} -->
            <el-tag v-if="scope.row.status === 0">草稿</el-tag>
            <el-tag type="info" v-else-if="scope.row.status === 1">待审核</el-tag>
            <el-tag type="success" v-else-if="scope.row.status === 2">审核通过</el-tag>
            <el-tag type="warning" v-else-if="scope.row.status === 3">审核失败</el-tag>
            <el-tag type="danger" v-else-if="scope.row.status === 4">已删除</el-tag>
          </span>
        </template>
      </el-table-column>
      <!-- 发布时间 -->
      <el-table-column
        prop="pubdate"
        label="发布时间">
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!--
            scope.row： 表示这一行的数据
            scope.$index： 表示这一行的索引（0.1.2....）
           -->
           <!--  v-loading="fullscreenLoading" -->
          <el-button type="primary" icon="el-icon-edit" circle
            @click="hEdit(scope.$index, scope.row)">
          </el-button>
          <!-- 删除 -->
          <el-button type="danger" icon="el-icon-delete" circle
            @click="hDelete(scope.$index, scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页显示
      page-sizes： 每一显示页数，默认10条，动态改变--设置总页数
      current-change事件： 当点击页码，他会触发并传入当前页码
      hide-on-single-page: 如果只有一页，则不显示分页效果
    -->
    <el-pagination
      v-show="this.total_count > 10"
      background
      layout="prev, pager, next"
      @current-change ="hCurrentChange"
      :page-size= "10"
      :total= "total_count">
    </el-pagination>
  </el-card>
  </div>
</template>

<script>
import Channel from '@/components/Channel.vue'
import MyBread from '@/components/mybread/mybread.vue'
export default {
  components: {
    MyBread,
    Channel
  },
  data () {
    return {
      form: {
        date: '', // 表单日期选择范围
        status: null, // 表单状态
        channelId: null // 频道id
      },
      // 表格数据
      articles: [],
      // 当前查询得到的总条数
      total_count: 0,
      // 当前要查询的页码，默认第一页
      curPage: 1,
      // 加载状态
      isLoading: false,
      Loading: false
      // fullscreenLoading: false
    }
  },
  created () {
    // 获取文章列表
    this.loadArticle()
  },
  methods: {
    // 当前页码
    hCurrentChange (curPage) {
      // 根据当前页码-重发请求
      // alert(curPage)
      // 1.更新页码
      this.curPage = curPage
      // 2.重发请求
      this.loadArticle()
    },
    // 编辑
    hEdit (index, row) {
      console.log(index, row)
      const idStr = row.id.toString()
      this.$router.push({
        name: 'ArticlesEdit',
        params: {
          id: idStr
        }
      })
      // this.fullscreenLoading = true
    },
    // 删除
    hDelete (index, row) {
      console.log(index, row)
      // console.log(row.id);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const idStr = row.id.toString()
          const result = await this.$http({
            method: 'delete',
            url: '/mp/v1_0/articles/' + idStr
          })
          console.log(result)
          this.loadArticle()
        } catch (error) {
          this.$message.error('删除失败，目前只能删除草稿！')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    //  获取文章列表
    async loadArticle () {
      // 组装查询条件
      // 1.当前页码
      // 2.日期范围
      let beginpubdate = null
      let endpubdate = null
      // 3.根据用户选中的日期进行赋值
      beginpubdate = this.form.date[0]
      endpubdate = this.form.date[1]
      const queryObj = {
        page: this.curPage,
        begin_pubdate: beginpubdate,
        end_pubdate: endpubdate,
        status: this.form.status,
        channel_id: this.form.channelId

      }
      // 对于axios来说，在哪里传入参数
      // 如果参数放在请求体里body(post请求) 则要写在data
      // 如果参数放请求头中(get请求) 则要写在params中
      // 如果明确说明参数要放在headers中 则要写在headers中
      // 如果传的参数是 null axios 就不会向后传

      try {
        const result = await this.$http({
          method: 'get',
          url: '/mp/v1_0/articles',
          params: queryObj
        })
        console.log(result)
        this.articles = result.data.data.results
        // 总条数
        this.total_count = result.data.data.total_count
        this.isLoading = false
        this.Loading = false
      } catch (error) {
        this.$message.error('查询失败！')
        this.isLoading = false
        this.Loading = false
      }
    },
    onSubmit () {
      // 改变状态
      this.isLoading = true
      this.Loading = true
      // 查询时 获取数据
      this.loadArticle()
      // console.log('submit!')
    }
  }
}
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
</style>
